<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="商家优惠卡列表">
        <!-- <van-swipe-cell v-for="item in cards" :key="item.id"> -->
        <van-cell
          v-for="item in cards"
          :key="item.id"
          :title="item.card_name"
          :value="item.amount + '元'"
          :to="{name: 'GiftCard', params:{retailer_id: retailer_id, card_id:item.id}}"
          is-link
        >
          <template>
            <span>{{item.amount}} 元 | {{item.count||0}} 张</span>
          </template>
          <template #label>
            <van-row>
              <van-col span="24">商家名称：{{ item.retailer_name }}</van-col>
            </van-row>
            <van-row>
              <van-col span="24">使用说明：{{ item.comment }}</van-col>
            </van-row>
            
          </template>
        </van-cell>
        
      </van-cell-group>
    </van-list>

  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getWxRetailerCards } from "@/api/card";

export default {
  name: "RetailerCardList",
  components: {
    NavBar,
  },
  data() {
    return {
      title: this.$route.meta.title,

      cards: [],
      loading: false,
      finished: false,
      actionShow: false,
      card: {},

      listQuery: {
        page: 1,
        page_size: 10,
        retailer_id: this.retailer_id,
      },
    };
  },

  props: ["retailer_id"],

  mounted() {
      console.log(this.retailer_id);
  },

  methods: {
    onLoad() {
      this.getCardList();
    },
    getCardList() {
      this.loading = true;
      this.listQuery.retailer_id = this.retailer_id;
      getWxRetailerCards(this.listQuery)
        .then((res) => {
          console.log(res);
          if (res.data.results.length == 0) {
            this.cards = [];
            this.finished = true;
          }
          this.listQuery.page = res.data.page;
          this.loading = false;
          this.cards.push(...res.data.results);
          if (this.cards.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取会员卡失败!");
        });
    },

  },
};
</script>

<style scoped>
.content {
  margin: 5px;
}
.van-cell__label {
  font-size: 14px;
}
.van-row {
  padding: 5px 5px;
}
.van-cell__title{
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
}
.van-cell__value {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
</style>